<template>
  <div id="total">
    <!-- 头部 -->
    <div id="top">
      <!-- 左边文字 -->
      <div id="le">
        <div>
          <span>挂号编号: </span>
          <textarea v-model="textarea1" id="textarea" placeholder="未生成" />
        </div>
        <div>
          <span>挂号员: {{ store.state.router.userData.userInfo.empUserName }} </span>
        </div>
      </div>
      <!-- 右边按钮 -->
      <div id="rightOne">
        <div id="yingshouBox">
          <span id="yingShou">应收: &nbsp</span>
          <textarea v-model="textarea3" id="textarea1" placeholder="333" />
        </div>
        <div>
          <el-button type="warning" @click="payClick">收费</el-button>
        </div>
      </div>
    </div>
    <!-- 下面内容部分 -->
    <div id="bottom">
      <!-- 左边患者信息部分 -->
      <div id="left">
        <!-- 患者信息标题 -->
        <div id="title">
          <span id="blue">患者信息</span>
        </div>
        <!-- 患者信息表格 -->
        <div id="p_form">
          <el-form :model="form" label-width="100px">
            <el-form-item label="姓名:">
              <div id="kuang">
                <div id="k_left">
                  <!-- 输入框 -->
                  <el-input v-model="form.bankName" placeholder="请输入姓名" />
                </div>
                <div id="k_right">
                  <!-- 弹框按钮 -->
                  <el-button
                    id="name"
                    @click="openPatient"
                    :icon="Search"
                    circle
                  />
                </div>
              </div>
            </el-form-item>
            <!-- 弹出框 -->
            <el-dialog v-model="dialogTableVisible" title="选择患者">
              <!-- 输入框 -->
              <div class="mt-4" id="input">
                <el-input
                  v-model="search"
                  placeholder="请输入患者姓名"
                  class="input-with-select"
                >
                  <template #append>
                    <el-button :icon="Search" @click="searchPatient" />
                  </template>
                </el-input>
              </div>
              <!-- 表格 -->

              <el-table :data="getPatientsData" @select="popoverClick">
                <el-table-column type="selection" width="60" />
                <el-table-column
                  property="bankName"
                  label="患者姓名"
                  width="140"
                />
                <el-table-column property="sex" label="性别" width="120" />
                <el-table-column property="age" label="年龄" width="120" />
                <el-table-column property="phone" label="电话" width="200" />
                <el-table-column
                  property="updateTime"
                  label="更新日期"
                  width="200"
                />
              </el-table>
              <div id="bottom1">
                <div id="b_left">
                  <el-pagination
                    small
                    background
                    layout="prev, pager, next"
                    v-model:page-size="PageSizeTwo"
                    :total="store.state.registerTreat.patientsTotal"
                    @current-change="pageChangeTwo"
                    class="mt-4"
                  />
                </div>
                <div id="b_right">
                  <el-button type="primary" @click="close">确认</el-button>
                </div>
              </div>
            </el-dialog>
            <el-form-item label="性别">
              <el-select v-model="form.sex" placeholder="男">
                <el-option label="男" value="shanghai" />
                <el-option label="女" value="beijing" />
              </el-select>
            </el-form-item>
            <div id="f">
              <div id="f_left">
                <el-form-item label="生日">
                  <el-col :span="18.2">
                    <el-date-picker
                      v-model="form.birthday"
                      type="date"
                      placeholder="生日日期"
                      style="width: 100%"
                    />
                  </el-col>
                </el-form-item>
              </div>
              <div id="f_right"></div>
            </div>
            <el-form-item label="年龄:">
              <el-input v-model="form.age" placeholder="请输入年龄" />
            </el-form-item>
            <el-form-item label="手机号码:">
              <el-input v-model="form.phone" placeholder="请输入手机号码" />
            </el-form-item>
            <el-form-item label="身份证:">
              <el-input v-model="form.idNumber" placeholder="请输入身份证" />
            </el-form-item>
            <!-- 诊断详情 -->
            <el-form-item label="住址">
              <el-input
                placeholder="请输入住址"
                v-model="form.rightVision"
                type="textarea"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确认</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 右边科室等部分 -->
      <div id="right">
        <!-- 上边查询栏 -->
        <div id="require">
          <!-- 第一排 -->
          <div id="first">
            <!-- 科室 -->
            <div id="k">
              <span id="inner">科室:&nbsp&nbsp</span>
              <!-- 选择器 -->
              <el-select v-model="value" class="m-2" placeholder="全部科室">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <!-- 医生 -->
            <div id="y">
              <span id="innerOne">医生:&nbsp&nbsp</span>
              <!-- 选择器 -->
              <el-select v-model="value2" class="m-2" placeholder="全部医生">
                <el-option
                  v-for="item in getDoctorData"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </div>
            <!-- 挂号类别 -->
            <div id="g">
              <span id="innerTwo">挂号类别:&nbsp&nbsp</span>
              <!-- 选择器 -->
              <el-select v-model="value3" class="m-2" placeholder="全部号">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <!-- 日期 -->
            <div id="date">
              <!-- 日期选择器 -->
              <div class="demo-date-picker">
                <div class="block">
                  <span id="innerThree" class="demonstration"
                    >挂号日期:&nbsp&nbsp</span
                  >
                  <el-date-picker
                    id="dateOne"
                    v-model="value1"
                    type="date"
                    placeholder="请选择挂号日期"
                  />
                </div>
              </div>
            </div>
          </div>
          <!-- 第二排 -->
          <div id="second">
            <!-- 时间 -->
            <div id="g">
              <span id="inner">时间:&nbsp&nbsp</span>
              <!-- 选择器 -->
              <el-select v-model="value4" class="m-2" placeholder="全部">
                <el-option
                  v-for="item in optionsFour"
                  :key="item.value4"
                  :label="item.label4"
                  :value="item.value4"
                />
              </el-select>
              <el-button id="btnTwo" type="primary" @click="queryFn"
                >查询</el-button
              >
            </div>
          </div>
        </div>
        <!-- 下边表格 -->
        <div id="k_form">
          <!-- 表格内容 -->
          <el-table
            :data="getRegisterData"
            style="width: 100%"
            @select="patientChange"
          >
            <el-table-column type="selection" width="40" />
            <el-table-column
              align="center"
              prop="remark"
              label="日期"
              width="200"
            />
            <el-table-column
              align="center"
              prop="createDate"
              label="时间"
              width="125"
            />
            <el-table-column
              align="center"
              prop="department"
              label="科室名称"
              width="200"
            />
            <el-table-column
              align="center"
              prop="doctorName"
              label="医生姓名"
              width="200"
            />

            <el-table-column
              align="center"
              prop="registrationFee.regType"
              label="挂号类型"
              width="180"
            />
            <el-table-column
              align="center"
              prop="registrationFee.regMoney"
              label="挂号费"
              width="200"
            />
          </el-table>
          <!-- 分页器 -->
          <el-pagination
            small
            background
            layout="prev, pager, next"
            class="mt-4"
            v-model:page-size="PageSize"
            :total="store.state.registerTreat.registerTotal"
            @current-change="pageChange"
          />
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="payDialog" title="支付宝支付" width="30%" align-center>
        <span>支付宝沙盒测试支付</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="payDialog = false">取消</el-button>
                <el-button type="primary" @click="payMoney">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useStore, mapGetters, mapMutations } from "vuex";
import { ElMessage } from "element-plus";

const payClick = (row: any) => {
    payMsg.value = row;
    payDialog.value = true;
}
const payDialog = ref(false);
const payMsg = ref(null)
const payMoney = () => {
    payDialog.value = false
    if (store.state.router.userData.userInfo.empUserName == undefined) {
        ElMessage({
            message: '请登录',
            type: 'error',
        })
        return
    }
    setCharge({
    // 患者姓名
    bankName: form.bankName,
    // 患者性别
    sex: form.sex,
    // 患者生日
    birthday: form.birthday,
    // 患者身份证id
    idNumber: form.idNumber,
    // 患者手机号码
    phone: form.phone,
    // 患者地址
    address: form.rightVision,
    // 医生挂号类型
    regType: a[0].registrationFee.regType,
    // 医生姓名
    doctorName: a[0].doctorName,
    // 医生id
    doctorShiftsld: a[0].id,
  });
    window.location.href = "/alipay?message=" + store.state.router.userData.userInfo.empUserName +
        "&orderId=" + a[0].id +
        "&price=" + a[0].registrationFee.regMoney +
        "&tradeType=1"
    ElMessage({
        message: '支付成功',
        type: 'success',
    })
}
function PrefixInteger(num:any, length:any) {
  return (Array(length).join('0') + num).slice(-length);
 }
 function getRandomStr(length:any){
  let num = PrefixInteger(Math.floor(Math.random()*1000000),length)
  return new Date().toLocaleDateString().replaceAll("/","")+num
 }
const store = useStore();
const search = ref("");
// 挂号编号
const textarea1 = ref("");
// 挂号员
const textarea2 = ref("");
// 应收费用
const textarea3 = ref("");
// 挂号表格展示数据
const setRegisterData = mapMutations(["setRegisterData"]).setRegisterData.bind({
  $store: store,
});
// 击按钮弹窗选择患者表格默认数据
const setPatientsData = mapMutations(["setPatientsData"]).setPatientsData.bind({
  $store: store,
});
// 弹窗内搜索->查询患者库患者信息
const setSearchNameData = mapMutations([
  "setSearchNameData",
]).setSearchNameData.bind({
  $store: store,
});
// 医生下拉框
const setDoctorList = mapMutations(["setDoctorList"]).setDoctorList.bind({
  $store: store,
});
// 科室下拉框
const setSectionList = mapMutations(["setSectionList"]).setSectionList.bind({
  $store: store,
});
// 挂号类别下拉框
const setCategoryList = mapMutations(["setCategoryList"]).setCategoryList.bind({
  $store: store,
});
// 门诊挂号查询按钮
const setOutpatientsQuery = mapMutations([
  "setOutpatientsQuery",
]).setOutpatientsQuery.bind({
  $store: store,
});
// 收费按钮
const setCharge = mapMutations(["setCharge"]).setCharge.bind({
  $store: store,
});
// 支付功能接口
const setPayFn = mapMutations(["setPayFn"]).setPayFn.bind({
  $store: store,
});
// 展示挂号表格数据
const getRegisterData = computed(
  mapGetters(["getRegisterData"]).getRegisterData.bind({
    $store: store,
  })
);
// 展示点击按钮弹窗选择患者表格默认数据
const getPatientsData = computed(
  mapGetters(["getPatientsData"]).getPatientsData.bind({
    $store: store,
  })
);
// 医生下拉框
const getDoctorData = computed(
  mapGetters(["getDoctorData"]).getDoctorData.bind({
    $store: store,
  })
);
// 分页
// 挂号表格默认每页展示5个数据
const PageSize = ref(5);
// 选择患者表格默认数据默认每页展示5个数据
const PageSizeTwo = ref(5);
onBeforeMount(() => {
  // 挂号表格
  setRegisterData({ CurrentPage: 1, PageSize: PageSize.value });
  // 击按钮弹窗选择患者表格默认数据
  setPatientsData({
    // bankName: search.value,
    CurrentPageTwo: 1,
    PageSizeTwo: PageSizeTwo.value,
  });
  // 医生下拉框
  setDoctorList();
  // 科室下拉框
  setSectionList();
  // 挂号类别下拉框
  setCategoryList();
});
// 挂号表格分页功能实现
const pageChange = (CurrentPage: any) => {
  setRegisterData({ CurrentPage: CurrentPage, PageSize: PageSize.value });
};
// 弹窗内表格分页功能
const pageChangeTwo = (CurrentPage: any) => {
  setPatientsData({ CurrentPage: CurrentPage, PageSize: PageSize.value });
};
// 点击页面搜索图标出现弹窗
const openPatient = () => {
  dialogTableVisible.value = true;
  // console.log("打开患者表格");
  setPatientsData({
    // bankName: search.value,
    CurrentPage: 0,
    PageSize: PageSizeTwo.value,
  });
};

// 弹框内搜索病人名字
const searchPatient = () => {
  setSearchNameData({
    bank_name: search.value,
  });
};
// 科室
const value = ref("");
const options = [
  {
    value: "",
    label: "全部科室",
  },
  {
    value: "1",
    label: "腔肠科",
  },
  {
    value: "2",
    label: "神经外科",
  },
  {
    value: "3",
    label: "神经科",
  },
  {
    value: "4",
    label: "骨科",
  },
  {
    value: "5",
    label: "内科",
  },
  {
    value: "6",
    label: "妇科",
  },
  {
    value: "7",
    label: "牙科",
  },
  {
    value: "8",
    label: "儿科",
  },
];
// 挂号日期
const value1 = ref("");
// 医生
const value2 = ref("");
// 挂号类别
const value3 = ref("");
const options3 = [
  {
    value: "",
    label: "全部挂号类别",
  },
  {
    value: "1",
    label: "测试",
  },
  {
    value: "2",
    label: "赵公子特殊服务",
  },
  {
    value: "4",
    label: "ICU",
  },
  {
    value: "5",
    label: "传染",
  },
  {
    value: "6",
    label: "卡比布吧",
  },
  {
    value: "7",
    label: "玛卡巴卡",
  },
  {
    value: "34",
    label: "赵悦悦特殊服务",
  },
  {
    value: "35",
    label: "string",
  },
];
// 时间
const value4 = ref("");

// 时间
const optionsFour = [
  {
    value4: "Option1",
    label4: "全部",
  },
  {
    value4: "Option2",
    label4: "上午",
  },
  {
    value4: "Option3",
    label4: "下午",
  },
  {
    value4: "Option4",
    label4: "晚上",
  },
];

const form = reactive({
  bankName: "",
  sex: "",
  birthday: "",
  phone: "",
  idNumber: "",
  rightVision: "",
  age: "",
});

const dialogTableVisible = ref(false);

const onSubmit = () => {
  console.log("submit!");
};
// 点击查询按钮
const queryFn = () => {
  // 更改时间戳函数
  const formatDate = (a: any) => {
    var date = new Date(a);
    var YY = date.getFullYear() + "-";
    var MM =
      (date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1) + "-";
    var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    return YY + MM + DD + " 11:59:59";
  };
  let startDate = value1.value;
  let startDate2 = formatDate(startDate);
  // console.log("startDate2", startDate2);
  setOutpatientsQuery({
    CurrentPage: 1,
    PageSize: PageSize.value,
    doctor: value2.value,
    // value:科室 ,value3:挂号类别
    departmentId: value.value,
    regTypeId: value3.value,
    remarK: startDate2,
  });
};

// 弹窗患者库中的数据绑定
let b: any;
const popoverClick = (selection: any) => {
  b = JSON.parse(JSON.stringify(selection));
};
// 患者库点击确认
const close = () => {
  dialogTableVisible.value = false;
  // 患者姓名
  form.bankName = b[0].bankName + "老鼠";
  // 患者性别
  form.sex = b[0].sex;
  // 患者年龄
  form.age = b[0].age;
  // 患者手机号
  form.phone = b[0].phone;
  // 患者住址
  form.rightVision = b[0].address;
  // 患者身份证
  form.idNumber = b[0].idNumber;
  // 患者生日
  form.birthday = b[0].birthday + " 00:00:00";
};
// 点击医生挂号表格
let a: any;
const patientChange = (selection: any) => {
  a = JSON.parse(JSON.stringify(selection));
  console.log(a[0]);

  // 绑定挂号编号-------------------------------------------------------=
  textarea1.value = getRandomStr(5);
  // 绑定挂号员-------------------------------------------------------=
  textarea2.value = a[0].doctorName;
  // 绑定应收金额-------------------------------------------------------=
  textarea3.value = a[0].registrationFee.regMoney;
};

// 点击收费按钮
const chargeFn = () => {
  // 收费按钮
  setCharge({
    // 患者姓名
    bankName: form.bankName,
    // 患者性别
    sex: form.sex,
    // 患者生日
    birthday: form.birthday,
    // 患者身份证id
    idNumber: form.idNumber,
    // 患者手机号码
    phone: form.phone,
    // 患者地址
    address: form.rightVision,
    // 医生挂号类型
    regType: a[0].registrationFee.regType,
    // 医生姓名
    doctorName: a[0].doctorName,
    // 医生id
    doctorShiftsld: a[0].id,
  });
  // 支付功能
  setPayFn({
    // 绑定挂号员-------------------------------------------------------=
    message: a[0].doctorName,
    // 绑定挂号编号-------------------------------------------------------=
    orderId: a[0].id,
    // 绑定金额-------------------------------------------------------=
    price: a[0].registrationFee.regMoney,
  });
};
</script>
<style scoped>
#yingshouBox{
  display: flex;
}
#yingShou {
  margin-top: 10px;
}
#le {
  margin-top: 12px;
}
#textarea {
  /* 去除边框 */
  margin-left: 5px;
  color: red;
  border: none;
  resize: none;
  /* 去除选中后的边框 */
  outline: none;
  font-size: 15px;
  font-weight: 700;
}
#textarea1 {
  /* 去除边框 */
  margin-top: 0px;
  color: red;
  width: 50px;
  height: 20px;
  border: none;
  resize: none;
  /* 去除选中后的边框 */
  outline: none;
  font-size: 15px;
  font-weight: 700;
}
#kuang {
  display: flex;
}
#k_left {
  width: 185px;
}
#k_right {
  position: absolute;
  left: 170px;
}
#bottom1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

#b_right {
  margin-top: 12px;
}
#input {
  margin-bottom: 20px;
}
#f_left {
  width: 220px;
}
#f_right {
  margin-top: 5px;
}
#f_right > span {
  font-size: 14px;
  color: #606266;
}
#f {
  display: flex;
  justify-content: space-between;
}
.m-2 {
  width: 180px;
}
.el-pagination {
  margin-top: 20px;
}
#btnTwo {
  margin-left: 10px;
}
#k_form {
  display: flex;
  flex-flow: column;
  align-items: center;
}
#date {
  display: flex;
  align-items: center;
}
#total {
  display: flex;
  flex-flow: column;
}
#top {
  margin-bottom: 20px;
  justify-content: space-between;
  height: 50px;
  background-color: white;
  display: flex;
  align-items: center;
}
#le > div {
  display: flex;
  margin-left: 20px;
}
#top > div {
  display: flex;
}
#rightOne {
  display: flex;
  align-items: center;
  justify-content: center;
}
#right {
  display: flex;
  flex-flow: column;
  align-items: center;
  background-color: white;
}
#blue {
  color: #429bff;
  font-weight: 600;
  margin-left: 55px;
}
#bottom {
  display: flex;
}
#left {
  display: flex;
  flex-flow: column;
  width: 380px;
  background-color: #f8f8f8;
}
#p_form {
  margin-top: 10px;
  width: 300px;
}
#right {
  display: flex;
}

#btn {
  margin-top: 20px;
}
#require {
  width: 100%;
  display: flex;
  flex-flow: column;
}
#first {
  display: flex;
  margin-top: 10px;
}
#first > div {
  margin-left: 10px;
}
#k,
#y,
#g,
#t {
  display: flex;
  align-items: center;
}
#inner {
  width: 50px;
}
#innerOne {
  width: 50px;
}
#innerTwo {
  width: 80px;
}
.demo-date-picker {
  width: 300px;
  display: flex;
  align-items: center;
}
#second {
  display: flex;

  margin-left: 10px;
  margin-top: 10px;
}
</style>
